1import { HStack, Label, List, Navigation, NavigationSplitView, NavigationSplitViewVisibility, Script, Text, useState, VStack } from "scripting"
2
3type Department = {
4 name: string
5 staff: Person[]
6}
7
8type Company = {
9 name: string
10 departments: Department[]
11}
12
13type Person = {
14 name: string
15 phoneNumber: string
16}
17
18const companyA: Company = {
19 name: "Company A",
20 departments: [
21 {
22 name: "Sales",
23 staff: [
24 {
25 name: "Juan Chavez",
26 phoneNumber: "(408) 555-4301",
27 },
28 {
29 name: "Mei Chen",
30 phoneNumber: "(919) 555-2481",
31 }
32 ]
33 },
34 {
35 name: "Engineering",
36 staff: [
37 {
38 name: "Bill James",
39 phoneNumber: "(408) 555-4450"
40 },
41 {
42 name: "Anne Johnson",
43 phoneNumber: "(417) 555-9311"
44 }
45 ]
46 }
47 ]
48}
49
50const companies: Company[] = [
51 {
52 name: "Company A",
53 departments: [
54 {
55 name: "Sales",
56 staff: [
57 {
58 name: "Juan Chavez",
59 phoneNumber: "(408) 555-4301",
60 },
61 {
62 name: "Mei Chen",
63 phoneNumber: "(919) 555-2481",
64 }
65 ]
66 },
67 {
68 name: "Engineering",
69 staff: [
70 {
71 name: "Bill James",
72 phoneNumber: "(408) 555-4450"
73 },
74 {
75 name: "Anne Johnson",
76 phoneNumber: "(417) 555-9311"
77 }
78 ]
79 }
80 ]
81 },
82 {
83 name: "Company B",
84 departments: [
85 {
86 name: "Human resources",
87 staff: [
88 {
89 name: "Lily",
90 phoneNumber: "(111) 555-5552"
91 },
92 {
93 name: "Ross",
94 phoneNumber: "(222) 666-8888"
95 }
96 ]
97 },
98 {
99 name: "Sales",
100 staff: [
101 {
102 name: "John",
103 phoneNumber: "(1) 888-4444"
104 }
105 ]
106 }
107 ]
108 }
109]
110
111function PersonRowView({
112 person
113}: {
114 person: Person
115}) {
116 return <VStack
117 alignment={"leading"}
118 spacing={3}
119 >
120 <Text
121 foregroundStyle={"label"}
122 font={"headline"}
123 >{person.name}</Text>
124 <HStack
125 spacing={3}
126 foregroundStyle={"secondaryLabel"}
127 font={"subheadline"}
128 >
129 <Label
130 title={person.phoneNumber}
131 systemImage={"phone"}
132 />
133 </HStack>
134 </VStack>
135}
136
137function PersonDetailView({
138 person
139}: {
140 person: Person
141}) {
142
143 return <VStack>
144 <Text
145 font={"title"}
146 foregroundStyle={"label"}
147 >{person.name}</Text>
148 <HStack
149 foregroundStyle={"secondaryLabel"}
150 >
151 <Label
152 title={person.phoneNumber}
153 systemImage={"phone"}
154 />
155 </HStack>
156 </VStack>
157}
158
159 function Example() {
160 const [columnVisibility, setColumnVisibility] = useState<NavigationSplitViewVisibility>("detailOnly")
161 const [selectedPerson, setSelectedPerson] = useState<Person>()
162
163 return <NavigationSplitView
164 columnVisibility={{
165 value: columnVisibility,
166 onChanged: (value) => {
167 console.log("columnVisibility changed to", value)
168 setColumnVisibility(value)
169 },
170 }}
171 sidebar={
172 <List>
173 {companyA.departments[0].staff.map(person =>
174 <PersonRowView
175 person={person}
176 contentShape={"rect"}
177 onTapGesture={() => {
178 setSelectedPerson(person)
179 }}
180 />
181 )}
182 </List>
183 }
184 >
185 {selectedPerson != null
186 ? <PersonDetailView
187 person={selectedPerson}
188 />
189 : <Text>Please select a person.</Text>
190 }
191 </NavigationSplitView>
192}
193
194async function run() {
195 await Navigation.present({
196 element: <Example />
197 })
198
199 Script.exit()
200}
201
202run()
